<template>
    <view>
        <view class="container">
            <view class="top-box">
                <view class="serach-box flex col-center">
                    <view class="search flex col-center">
                        <view class="icon-border" @click="scan">
                            <uni-icons type="scan" size="25"></uni-icons>
                        </view>
                        <u-input v-model="searchVal" type="text" clearable placeholder="请手动输入电子标签" />
                    </view>
                    <button class="confirm-btn" @click="confirm">确认</button>
                </view>
            </view>
        </view>
        <view class="p-30">
            <view class="m-b-20">
                <view class="flex coe-center row-between p-20">
                    <view class="bold ">编辑信息 </view>
                    <view @click="goPages"><uni-tag text="查看入库列表" /> </view>
                </view>
                <u-line color="black" />
            </view>
            <view v-if="JSON.stringify(goodsInfo) === '{}'" class="empty flex col-center row-center">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
            <view v-else class="">
                <uni-forms :model="goodsInfo">
                    <uni-forms-item label="商品编号">
                        <uni-easyinput disabled v-model="goodsInfo.productNo " border="none" />
                    </uni-forms-item>
                    <uni-forms-item label="销售日期">
                        <uni-easyinput v-model="goodsInfo.salesDate" @focus="showCalendar = true" border="none"
                            placeholder="请选择日期" />
                        <u-calendar v-model="showCalendar" mode="date" @change="selectDate"></u-calendar>
                    </uni-forms-item>
                    <uni-forms-item label="销售价格">
                        <uni-easyinput v-model="goodsInfo.salesPrice" type="number" border="none"
                            placeholder="请输入销售价格" />
                    </uni-forms-item>
                    <uni-forms-item label="主播">
                        <uni-easyinput v-model="goodsInfo.anchor" border="none" placeholder="请输入主播" />
                    </uni-forms-item>
                    <uni-forms-item label="直播场次">
                        <uni-easyinput v-model="goodsInfo.liveBroadcastSessions" border="none" placeholder="请输入直播场次" />
                    </uni-forms-item>
                    <uni-forms-item label="商品毛利">
                        <uni-easyinput v-model="goodsInfo.productGrossProfit" border="none" placeholder="请输入商品毛利" />
                    </uni-forms-item>
                    <uni-forms-item label="销售状态">
                        <uni-data-select v-model="goodsInfo.salesStatus" :localdata="salesStatusList"></uni-data-select>
                    </uni-forms-item>
                </uni-forms>
                <u-button type="primary" @click="submit">点击保存</u-button>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue';
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        apiAddSales,
        apiUpdateSales,
    } from '@/api/index.js'

    const searchVal = ref('')
    const goodsInfo = ref({})
    const showCalendar = ref(false)
    const salesStatusList = [{
        text: '待售商品',
        value: 0
    }, {
        text: '已售商品',
        value: 1
    }]

    const goPages = () => {
        uni.navigateTo({
            url: '/pages/rmb/list'
        })
    }

    //扫码添加
    const scan = () => {
        // 允许从相机和相册扫码
        uni.scanCode({
            success: function(res) {
                searchVal.value = res.result
                addAddSaleGoodsStore(res.result)
            }
        });
    }

    //手动添加
    const confirm = () => {
        addAddSaleGoodsStore(searchVal.value)
    }

    //入库
    const addAddSaleGoodsStore = async (productNo) => {
        try {
            if (productNo) {
                // 调用扫码添加商品接口
                let res = await apiAddSales({
                    productNo,
                })
                if (res.code == 200) {
                    goodsInfo.value = res.data
                    uni.$u.toast('添加成功')
                } else {
                    uni.$u.toast(`${res.msg}`)
                }
            } else {
                uni.$u.toast('请输入商品编号')
            }
        } catch (error) {
            uni.$u.toast(`${error}`)
        }
    }

    const editData = async (params) => {
        try {
            let res = await apiUpdateSales(params)
            if (res.code == 200) {
                uni.$u.toast('编辑成功')
            } else {
                uni.$u.toast('编辑失败')
            }
        } catch (err) {

        }
    }

    const submit = () => {
        editData(goodsInfo.value)
    }

    const selectDate = (e) => {
        goodsInfo.value.salesDate = e.result
        showCalendar.value = false
    }
</script>

<style lang="scss">
    .container {
        .top-box {
            padding: 30rpx;
            background-color: #FBC260;

            .top-text {
                color: #222222;
                font-size: 26rpx;
                opacity: 0.8;
            }

            .serach-box {

                .search {
                    width: 480rpx;
                    height: 86rpx;
                    padding: 0 40rpx;
                    background: #FFFFFF;
                    border-radius: 10px;

                    .icon-border {
                        padding-right: 20rpx;
                        margin-right: 30rpx;
                        border-right: 3rpx solid #FBC260;
                    }
                }

                .confirm-btn {
                    color: #fff;
                    width: 159rpx;
                    height: 86rpx;
                    line-height: 86rpx;
                    font-size: 30rpx;
                    margin-left: 30rpx;
                    background: linear-gradient(0deg, #E87038, #BE4B16);
                    border-radius: 10rpx;
                }
            }
        }

        .main {
            height: calc(100vh - 398rpx);

            .empty {
                background-color: #F4F8FB;
                height: 100%;
            }

            .goods-img {
                width: 215rpx;
                height: 215rpx;
                margin-right: 30rpx;
            }

            .text-color {
                color: #BE4B16;
            }

            .goods-btn {
                width: 100rpx;
                height: 45rpx;
            }
        }
    }
</style>